<!DocType html>
<html>
    <head>demo</head>
    <body>
		<form>
			<input type="text"><br>
			<input type="text" name="tb2">
		</form>

	<script src="../js/EventUtil.js"></script>
	<script>
	 EventUtil.addHandler(window, "load", function(event){
		 alert("load");
	 });

	 var textbox = document.forms[0].elements[0];
	 EventUtil.addHandler(textbox, "focus", function(event){
		 event = EventUtil.getEvent(event);
		 var target = EventUtil.getTarget(event);
		 if(target.style.backgroundColor != "red"){
			 target.style.backgroundColor = "yellow";
		 }
	 });
	 EventUtil.addHandler(textbox, "blur", function(event){
		event = EventUtil.getEvent(event);
		 var target = EventUtil.getTarget(event);
		 if(/[^\d]/.test(target.value)){
			 target.style.backgroundColor = "red";
		 }else{
			target.style.backgroundColor = "";
		 }
	 });
	 EventUtil.addHandler(textbox, "change", function(event){
		event = EventUtil.getEvent(event);
		 var target = EventUtil.getTarget(event);
		 if(/[^\d]/.test(target.value)){
			 target.style.backgroundColor = "red";
		 }else{
			target.style.backgroundColor = "";
		 }
	 });
	 var textbox2 = document.forms[0].elements["tb2"];
	 EventUtil.addHandler(textbox2, "keypress", function(event){
		event = EventUtil.getEvent(event);
		 var target = EventUtil.getTarget(event);
		 var charCode = EventUtil.getCharCode(event);

		 if(!/^\d/.test(String.fromCharCode(charCode)) && charCode > 9
			&& !event.ctrlKey){
			 EventUtil.preventDefault(event);
		 }
	 });
	 EventUtil.addHandler(textbox, "paste", function(event){
		 event = EventUtil.getEvent(event);
		 var text = EventUtil.getClipboardText(event);

		 if(!/^\d*$/.test(text)){
			 EventUtil.preventDefault(event);
		 }
	 });
	</script>
    </body>
</html>